<template>
  <div class="regist">
    <Row type="flex" justify="center" align="middle" @keydown.enter.native="submitRegist">
      <Col style="width: 368px;">
        <Header />
        <Row>
          <Form ref="registForm" :model="form" :rules="rules" class="form">
            <span class="regist-title">{{ title }}</span>
            <FormItem prop="mobile">
              <Input v-model="form.mobile" size="large" clearable placeholder="请输入手机号">
                <Select v-model="select" slot="prepend" style="width: 70px">
                  <Option value="86">+86</Option>
                </Select>
              </Input>
            </FormItem>
            <FormItem prop="code" :error="errorCode">
              <Row type="flex" justify="space-between">
                <Input
                  v-model="form.code"
                  size="large"
                  clearable
                  placeholder="请输入短信验证码"
                  :maxlength="10"
                  class="input-verify"
                />
                <CountDownButton
                  ref="countDown"
                  @on-click="sendSmsCode"
                  :countTime="60"
                  :autoCountDown="true"
                  size="large"
                  :loading="sending"
                  :text="getSms"
                />
              </Row>
            </FormItem>
            <FormItem prop="password">
              <SetPassword size="large" v-model="form.password" @on-change="changeInputPass" />
            </FormItem>
            <FormItem prop="confirmPass">
              <Input type="password" v-model="form.confirmPass" placeholder="请再次输入新密码" size="large"></Input>
            </FormItem>
          </Form>
          <Row type="flex" justify="space-between">
            <Button
              class="regist-btn"
              type="primary"
              size="large"
              :loading="loading"
              @click="submitRegist"
            >
              <span v-if="!loading">{{ title }}</span>
              <span v-else>{{ title }}中...</span>
            </Button>
            <router-link to="/login" >
              <a class="to-login">使用已有账号登录</a>
            </router-link>
          </Row>
        </Row>
        <Footer />
      </Col>
    </Row>
  </div>
</template>

<script>
import md5 from 'md5';
import { sendmsm } from "@/api";
import { activate, getUserIsActivated, setActivated } from '@/api/users';
import { validateMobile, validatePassword } from "@/libs/validate";
import Header from "@/views/main-components/header";
import Footer from "@/views/main-components/footer";
import CountDownButton from "@/views/my-components/xboot/count-down-button";
import SetPassword from "@/views/my-components/xboot/set-password";
export default {
  components: {
    CountDownButton,
    SetPassword,
    Header,
    Footer
  },
  data() {
    const valideRePassword = (rule, value, callback) => {
      if (value !== this.form.password) {
        callback(new Error("两次输入密码不一致"));
      } else {
        callback();
      }
    };
    return {
      title: '激活帐号',
      passwordOp: '',
      getSms: "获取验证码",
      error: false,
      loading: false,
      sending: false,
      select: "86",
      errorCode: "",
      form: {
        password: "",
        confirmPass: "",
        mobile: "",
        code: ""
      },
      rules: {
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          },
          {
            validator: valideRePassword,
            trigger: "blur"
          }
        ],
        confirmPass: [
          {
            required: true,
            message: "请再次输入密码",
            trigger: "blur"
          },
          {
            validator: valideRePassword,
            trigger: "blur"
          }
        ],
        mobile: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur"
          },
          {
            validator: validateMobile,
            trigger: "blur"
          }
        ]
      }
    };
  },
  created() {
    this.passwordOp = this.$route.query.passwordOp;
    if (this.passwordOp.toLowerCase() == 'forgetpass') {
      this.title = '重置密码'
    } else {
      this.title = '帐号激活'
    }
  },
  methods: {
    initVaptcha() {},
    sendSmsCode() {
      if (this.form.mobile.length == 11) {
        let params = {
          bit: 6,
          mobile: this.form.mobile
        }
        sendmsm(params).then(res => {
          this.$Modal.info({
            title: "手机验证码",
            content: res.message
          });
        })
      }
    },
    changeInputPass(v, grade, strength) {
      this.form.passStrength = strength;
    },
    submitRegist() {
      this.$refs.registForm.validate(valid => {
        if (valid) {
          if (!this.form.code) {
            this.errorCode = "验证码不能为空";
            return;
          } else {
            this.errorCode = "";
          }
          this.loading = true;
          if (this.passwordOp.toLowerCase() == 'forgetpass') {
            // 重置密码
            this.loading = false;
            getUserIsActivated(this.form.mobile).then(res => {
              if (res.code == 0) {
                let params = {
                  mobile: this.form.mobile,
                  activated: 0
                };
                setActivated(params).then(res => {
                  if (res.code == 0) {
                    let params = { 
                      mobile: this.form.mobile, 
                      registration: this.form.code, 
                      password: md5(this.form.password)
                    };
                    activate(params).then(res => {
                      if (res.code == 0) {
                        this.$Modal.info({
                          title: "重置密码",
                          content: '重置密码成功'
                        });
                        let query = {
                          mobile: this.form.mobile
                        };
                        this.$router.push({
                          name: "login",
                          query: query
                        });
                      } else {
                        this.$Modal.info({
                          title: "重置密码",
                          content: '重置密码失败'
                        });
                      }
                    })
                  }
                })
              }
            });
          } else {
            // 激活帐号
            let params = { 
              mobile: this.form.mobile, 
              registration: this.form.code, 
              password: md5(this.form.password)
            };
            this.loading = false;
            activate(params).then(res => {
              if (res.code == 0) {
                this.$Modal.info({
                  title: "激活帐号",
                  content: res.message
                });
                let query = {
                  mobile: this.form.mobile
                };
                this.$router.push({
                  name: "login",
                  query: query
                });
              } else {
                this.$Modal.error({
                  title: "激活帐号",
                  content: res.message
                });
              }
            })
          }
        }
      });
    }
  },
  mounted() {
    this.initVaptcha();
  }
};
</script>

<style lang="less">
@import "./regist.less";
</style>
